<template>
  <div class="home">
    <Menu />
    <div class="mt30">
      <div class="prl20">
        <TitleReth
          title="xiangqing"
          :content="details.contestText"
          :videoSrc="details.contestVideoUrl"
          :contestFileId="details.contestFileId"
        />
        <div class="mt30">
          <TitleReth title="jindu" :content="details.contestSchedule" />
        </div>
        <div class="mt30">
          <TitleReth title="shuoming" :content="details.awardDescription" />
        </div>
        <div class="mt30">
          <TitleReth title="liucheng" :content="details.contestProcess" />
        </div>
        <div class="mt30">
          <HYTitle title="zhanshi" morePath="/vote" />
          <WorksList :list="workList" />
        </div>
        <div class="mt30">
          <HYTitle title="baodao" morePath="/report" />
          <ReportList :list="reporList" />
        </div>
      </div>
      <div class="committee">
        <HYTitle title="weiyuanhui" />
        <Committee :content="details.committeeIntroduction" />
      </div>
      <div class="prl20">
        <div class="mt30">
          <HYTitle title="mingdan" />
          <NameList :list="nameList" />
        </div>
        <div class="mt30">
          <HYTitle title="huigu" morePath="/review" />
          <LookList :list="lookList" />
        </div>
        <div class="mt30" style="margin-bottom: 45px">
          <Search />
        </div>
        <div style="margin-bottom: 40px">
          <Us :list="rightContent" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Menu from "@/components/Menu.vue";
import { defineComponent, onMounted, reactive, toRefs, computed } from "vue";
import TitleReth from "@/components/TitleReth.vue";
import HYTitle from "@/components/HYTtile.vue";
import WorksList from "@/components/WorksList.vue";
import ReportList from "@/components/ReportList.vue";
import Search from "@/views/home/components/Search.vue";
import Us from "@/views/home/components/Us.vue";
import LookList from "@/components/LookList.vue";
import NameList from "@/components/NameList.vue";
import Committee from "@/components/Committee.vue";
import {
  getDetails,
  gitWorksVote,
  selectNewsList,
  findHistoryVoteList,
} from "@/utils/apis/home";
export default defineComponent({
  components: {
    Menu,
    TitleReth,
    HYTitle,
    WorksList,
    ReportList,
    LookList,
    Search,
    Us,
    NameList,
    Committee,
  },
  setup() {
    const state = reactive({
      details: {} as any,
      workList: [],
      reporList: [],
      lookList: [],
      nameList: [],
    });

    const rightContent = computed(() => {
      if (state.details.rightContent) {
        return JSON.parse(state.details.rightContent);
      } else {
        return [];
      }
    });
    onMounted(async () => {
      //详情
      const res = await getDetails();
      state.details = res.data;
      const workList = await gitWorksVote({ page: 1, pageSize: 8 });
      state.workList = workList.data.list;
      const reporList = await selectNewsList({
        page: 1,
        pageSize: 8,
        category: 7,
      });
      state.reporList = reporList.data.list;
      const lookList = await selectNewsList({
        page: 1,
        pageSize: 8,
        category: 8,
      });
      state.lookList = lookList.data.list;
      const nameList = await findHistoryVoteList();
      state.nameList = nameList.data;
    });
    // toRefs 对数据进行包装优化 在模板里边使用的时候 可以去掉 state 直接访问state内部数据
    return { ...toRefs(state), rightContent };
  },
});
</script>
<style lang="scss" scoped>
.committee {
  background-color: $themeColor;
  padding: 20px;
}
</style>
